<template>
    <div>
        <van-nav-bar
  title="我的收藏"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/> 
                 <div  v-if="data">
                  <div  v-for="i in data"   :key="i.cd_id"  @click="$router.push(`/detail?cd_id=${i.cd_id}`)">
                    <img :src="`${i.cd_src}`" alt="" class="pro-img-1">
                    <div>
                      <p><b>{{i.cd_name}}</b> </p>
                      <div class="pro-2">
                      <img src="../assets/zhaodianzhuang.jpg" alt="" class="pro-img-2">
                      {{i.cd_km}}
                    </div>
                    </div>
                    <div class="pro-3">
                      4.9分  最近充电  4小时前  特来电权益  对外开放 限时免费停车 可赔付
                    </div>
                    <div class="pro-4">
                      <b>{{i.cd_price}}</b>元/度
                      <div class="pro-5">
                      <div class="p5-C">/10</div>
                      <div class="p5-B">闲9</div>
                      <div class="p5-A">快</div>
                    </div>
                    </div>
                   <hr class="pro-hr"> 
                  </div> 
                  
                 </div>
    </div>
</template>

<script>
    export default {
            setup() {
    const onClickLeft = () => history.back();
    return {
      onClickLeft,
    };
  },
        mounted () {
          this.getData()
          setInterval(()=>{
            this.getData()
          },1000)
        },
        data() {
            return {
                data:'',
            }
        },
        methods: {
            getData() {
                let url=`/save/select?sv_user=zhangsan`
                this.axios.get(url).then(res=>{
                    console.log(res);
                    this.data=res.data.r
                })
            }
        },
        
    }
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__content{
    height: 60px;
}
.pro-img-1{
  width: 80px;
  height: 80px;
  padding:0 10px;
  float: left;
}
.pro-2{
  float: right;
  margin-top: -35px;
  font-size: 14px;
  color: #ccc;
}
.pro-img-2{
  widows: 10px;
  height: 10px;
  
}
.pro-3{
  color: #ccc;
  font-size: 3px;
  margin-top: -15px;
}
.pro-4{
  margin-top: 10px;
  color: rgb(135, 133, 133);
}
.pro-4>b{
  color: red;
}
.pro-5{
  // float: right;
  font-size: 10px;
  margin-top: -20px;
  margin-right: 3px;
}
.p5-A{
  background-color: red;
  color: white;
  border-radius: 5px;
  padding: 1px 3px;
  float: right;
  margin-right: 2px;
}
.p5-B{
  color: red;
  float: right;
}
.p5-C{
  float: right;
  display: flex;
  margin-top: 2px;
}
.pro-hr{
  margin-top: 40px;
}

</style>